<template>
  <div class="policy-download-chart">
    <div :id="chartId" style="width: 100%; height: 170px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'PolicyDownloadChart',
  props: {
    chartId: {
      type: String,
      default: 'policyDownloadChart'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      // 先检查DOM元素是否存在
      const chartDom = document.getElementById(this.chartId)
      if (!chartDom) {
        console.warn(`图表容器不存在: ${this.chartId}`)
        return
      }
      
      try {
        this.chart = echarts.init(chartDom)
      
        // 默认空配置
        const option = {
          title: {
            text: '',
            textStyle: { fontSize: 12, color: '#fff' } // 标题文字改为白色
          },
          tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
          legend: { 
            data: ['国标数据', '行标数据'], 
            top: '5%', 
            right: '3%', 
            textStyle: { fontSize: 10, color: '#fff' }, // 图例文字改为白色
            icon: 'square' // 将图例图标设置为方形
          },
          xAxis: { 
            type: 'category', 
            data: [], 
            axisLabel: { fontSize: 10, rotate: 0, color: '#fff' }, // X轴标签改为白色
            axisLine: { lineStyle: { color: '#fff' } }, // X轴线改为白色
            axisTick: { lineStyle: { color: '#fff' } } // X轴刻度线改为白色
          },
          yAxis: { 
            type: 'value', 
            name: '数量', 
            nameTextStyle: { fontSize: 10, color: '#fff' }, // Y轴名称改为白色
            axisLabel: { fontSize: 10, color: '#fff' }, // Y轴标签改为白色
            axisLine: { lineStyle: { color: '#fff' } }, // Y轴线改为白色
            axisTick: { lineStyle: { color: '#fff' } }, // Y轴刻度线改为白色
            splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } } // 网格线改为半透明白色
          },
          series: [
            {
              name: '国标数据', 
              type: 'bar', 
              data: [], 
              itemStyle: {
                // 设置国标柱状图渐变颜色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#1890FF' },
                  { offset: 1, color: 'rgba(24,144,255,0.35)' }
                ])
              }, 
              emphasis: { 
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#40a9ff' },
                    { offset: 1, color: 'rgba(64,169,255,0.5)' }
                  ])
                } 
              }, 
              label: {
                show: true,          // 显示标签
                position: 'top',     // 标签位置在柱状图顶部
                fontSize: 10,        // 标签字体大小
                color: '#fff'        // 标签颜色改为白色
              } 
            },
            {
              name: '行标数据', 
              type: 'bar', 
              data: [], 
              itemStyle: {
                // 设置行标柱状图渐变颜色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#1EE7E7' },
                  { offset: 1, color: 'rgba(30,231,231,0.35)' }
                ])
              }, 
              emphasis: { 
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#4eefff' },
                    { offset: 1, color: 'rgba(78,239,255,0.5)' }
                  ])
                } 
              }, 
              label: {
                show: true,          // 显示标签
                position: 'top',     // 标签位置在柱状图顶部
                fontSize: 10,        // 标签字体大小
                color: '#fff'        // 标签颜色改为白色
              } 
            }
          ],
          grid: { left: '3%', right: '4%', bottom: '15%', top: '25%', containLabel: true }
        }
        
        this.chart.setOption(option)
      } catch (error) {
        console.error('图表初始化失败:', error)
      }
    },
    updateChart(data) {
      if (!this.chart || !data) return
      
      // 从数据中提取月份和对应的数量
      const months = []
      const gDataCounts = []
      const hDataCounts = []
      
      // 处理国标数据
      if (data.gData && data.gData.length > 0) {
        data.gData.forEach(item => {
          months.push(item.MONTH)
          gDataCounts.push(item.count)
        })
      }
      
      // 处理行标数据
      if (data.hData && data.hData.length > 0) {
        data.hData.forEach((item, index) => {
          if (!months.includes(item.MONTH)) {
            months.push(item.MONTH)
          }
          hDataCounts[index] = item.count
        })
      }
      
      // 排序月份
      months.sort()
      
      this.chart.setOption({
        xAxis: { data: months },
        series: [
          { name: '国标数据', data: gDataCounts },
          { name: '行标数据', data: hDataCounts }
        ]
      })
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize()
      }
    }
  }
}
</script>